<template>
  <div class="line">
    <div class="main" ref="main">
    </div>
  </div>
</template>
<script>
const echarts = require('echarts/lib/echarts') // 引入echarts
require('echarts/lib/chart/bar') // 引入柱状图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  data () {
    return {
      title: {
        text1: '图表名称',
        x: 'left',
        y: 'top',
        fontFamily: 'Courier New',
        fontSize: 20,
        color: '#000'
      },
      lineLegend: {
        backgroundColor: '#EFEBE3', // 背景色
        labColor: '#000000', // 刻度标签颜色
        labSize: 10, // 刻度标签大小
        lineColor: '#44a921', // 折线颜色
        pointSize: 1, // 拐点大小
        borderColor: '#2d2fd2', // 拐点颜色
        crossStyle: '#3d8de6', // 映射线颜色
        yName: '单位' // y轴单位
      },
      gridding: {
        isShowX: true, // x轴分割线
        isShowY: true, // y轴分割线
        lineColorX: '#c6c5ca', // x轴分割线颜色
        lineColorY: '#c6c5ca', // y轴分割线颜色
        lineTypeX: 'solid', // x轴分割线类型 实线：'solid'  线虚线：'dashed' 点虚线'dotted'
        lineTypeY: 'solid', // 轴分割线类型 实线：'solid'  线虚线：'dashed' 点虚线'dotted'
        lineWidthX: '1', // x轴分割线粗细
        lineWidthY: '1' // y轴分割线粗细
      },
      xData: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      yData: [5, 2, 3, 0, 10, 20]
    }
  },
  mounted () {
    this.initEcharts()
  },
  methods: {
    initEcharts () {
      // const THIS = this
      this.xData = this.$store.state.singleFile.info.xValue
      this.yData = this.$store.state.singleFile.info.yValue
      const mainDiv = this.$refs.main // 找到绘制的区域,强烈推荐使用refs
      const myChart = echarts.init(mainDiv) // 初始化
      myChart.setOption({ // 官网例子
        title: {
          text: this.title.text1,
          x: this.title.x, // 标题横向位置//////////////////////////////////// 增
          y: this.title.y, // 标题纵向位置//////////////////////////////////// 增
          textStyle: {
            fontFamily: this.title.fontFamily,
            fontSize: this.title.fontSize,
            color: this.title.color
          }
        },
        backgroundColor: this.lineLegend.backgroundColor,
        // 提示框取默认值，即鼠标移动到柱状图会显示内容
        tooltip: {
          trigger: 'axis', // 触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
          axisPointer: { // 坐标轴指示器，坐标轴触发有效，
            type: 'cross', // 默认为line，line直线，cross十字准星，shadow阴影
            crossStyle: {
              color: this.lineLegend.crossStyle // 十字准星横线颜色
            }
          }
        },
        // 右上角工具条
        toolbox: {
          show: true,
          feature: {
            mark: {
              show: true
            },
            /* dataView: {
              show: true,
              readOnly: false
            }, */
            saveAsImage: {
              show: true
            }
          }
        },
        xAxis: [{
          type: 'category',
          data: this.xData,
          show: true,
          axisLabel: {
            color: this.lineLegend.labColor, // 刻度标签
            fontSize: this.lineLegend.labSize
          },
          splitLine: {
            show: this.gridding.isShowX, // 是否显示分割线
            lineStyle: {
              color: this.gridding.lineColorX, // 分割线颜色
              type: this.gridding.lineTypeX, // 分割线类型 实线：'solid'  线虚线：'dashed' 点虚线'dotted'
              width: this.gridding.lineWidthX // 分割线粗细  1--4
            }
          }
        }],
        yAxis: [{
          type: 'value',
          name: this.lineLegend.yName, // y轴单位
          axisLabel: {
            color: this.lineLegend.labColor, // 刻度标签
            fontSize: this.lineLegend.labSize
          },
          splitLine: {
            show: this.gridding.isShowY, // 是否显示分割线
            lineStyle: {
              color: this.gridding.lineColorY, // 分割线颜色
              type: this.gridding.lineTypeY, // 分割线类型 实线：'solid'  线虚线：'dashed' 点虚线'dotted'
              width: this.gridding.lineWidthY // 分割线粗细  1--4
            }
          },
          axisLine: { /* 坐标轴，轴线的设置 */
            lineStyle: {
              color: '#000'
            }
          },
          axisTick: { /* 坐标轴刻度的设置 */
            lineStyle: {
              color: '#000'
            }
          }
        }
        ],
        series: [{
          // name: '最高气温',
          /* 数据的名称 */
          type: 'line',
          /* 这个数据的类型，画折线 */
          data: this.yData,
          yAxisIndex: 0,
          /* 与上面y轴的数组中，第一组数据对应 */
          itemStyle: {
            color: this.lineLegend.lineColor, // 折现颜色
            borderWidth: this.lineLegend.pointSize, // 拐点大小
            borderColor: this.lineLegend.borderColor // 拐点颜色
          }
        }]
      })
    }
  },

  watch: {
    '$store.state.singleFile.date': function (val) {
      console.log('进入line================')
      // this.xData = this.$store.state.singleFile.info.xValue
      // this.yData = this.$store.state.singleFile.info.yValue
      this.initEcharts()
    },
    '$store.state.chartTitle.text': function (val) {
      this.title.text1 = val
      console.log('histogram接收到的title' + this.title.text)
      this.initEcharts()
    },
    '$store.state.chartTitle.titleAcross': function (val) {
      this.title.x = val
      console.log('折线图接收到的标题横向位置' + val)
      this.initEcharts()
    },
    '$store.state.chartTitle.titleVertical': function (val) {
      this.title.y = val
      this.initEcharts()
    },
    '$store.state.chartTitle.wordFamily': function (val) {
      this.title.fontFamily = val
      this.initEcharts()
    },
    '$store.state.chartTitle.wordSize': function (val) {
      this.title.fontSize = val
      this.initEcharts()
    },
    '$store.state.chartTitle.titleColor': function (val) {
      this.title.color = val
      this.initEcharts()
    },
    '$store.state.lineLegend.backgroundColor': function (val) {
      this.lineLegend.backgroundColor = val
      this.initEcharts()
    },
    '$store.state.lineLegend.labColor': function (val) {
      this.lineLegend.labColor = val
      this.initEcharts()
    },
    '$store.state.lineLegend.labSize': function (val) {
      this.lineLegend.labSize = val
      this.initEcharts()
    },
    '$store.state.lineLegend.lineColor': function (val) {
      this.lineLegend.lineColor = val
      this.initEcharts()
    },
    '$store.state.lineLegend.pointSize': function (val) {
      this.lineLegend.pointSize = val
      console.log('折线图接收到的拐点大小')
      console.log(this.lineLegend.pointSize)
      this.initEcharts()
    },
    '$store.state.lineLegend.crossStyle': function (val) {
      this.lineLegend.crossStyle = val
      this.initEcharts()
    },
    '$store.state.lineLegend.borderColor': function (val) {
      this.lineLegend.borderColor = val
      this.initEcharts()
    },
    '$store.state.lineLegend.yName': function (val) {
      this.lineLegend.yName = val
      this.initEcharts()
    },
    '$store.state.grid.isShowX': function (val) {
      console.log('柱状图接收到的是否显示x轴分割线' + val)
      this.gridding.isShowX = val
      this.initEcharts()
    },
    '$store.state.grid.isShowY': function (val) {
      this.gridding.isShowY = val
      console.log('柱状图接收到的是否显示y轴分割线' + val)
      this.initEcharts()
    },
    '$store.state.grid.lineColorX': function (val) {
      console.log('柱状图接收到X轴分割线颜色' + val)
      this.gridding.lineColorX = val
      this.initEcharts()
    },
    '$store.state.grid.lineColorY': function (val) {
      console.log('柱状图接收到Y轴分割线颜色' + val)
      this.gridding.lineColorY = val
      this.initEcharts()
    },
    '$store.state.grid.lineTypeX': function (val) {
      this.gridding.lineTypeX = val
      this.initEcharts()
    },
    '$store.state.grid.lineTypeY': function (val) {
      this.gridding.lineTypeY = val
      this.initEcharts()
    },
    '$store.state.grid.lineWidthX': function (val) {
      console.log('柱状图接收到X轴分割线粗细为' + val)
      this.gridding.lineWidthX = val
      this.initEcharts()
    },
    '$store.state.grid.lineWidthY': function (val) {
      this.gridding.lineWidthY = val
      this.initEcharts()
    }
  },
  destroyed () {
    this.$store.state.singleFile.info = null
    this.$store.state.chartTitle.id = ''
    this.$store.state.chartTitle.text = ''
    this.$store.state.chartTitle.titleAcross = ''
    this.$store.state.chartTitle.titleVertical = ''
    this.$store.state.chartTitle.wordFamily = ''
    this.$store.state.chartTitle.wordSize = ''
    this.$store.state.chartTitle.titleColor = ''

    this.$store.state.grid.isShowX = true
    this.$store.state.grid.isShowY = true
    this.$store.state.grid.lineColorX = '#c6c5ca'
    this.$store.state.grid.lineColorY = '#c6c5ca'
    this.$store.state.grid.lineTypeX = 'solid'
    this.$store.state.grid.lineTypeY = 'solid'
    this.$store.state.grid.lineWidthX = '1'
    this.$store.state.grid.lineWidthY = '1'
  }
}
</script>
<style lang="scss" scoped>
  .line{
    .main {
      width: 735px;
      height:500px;
    }
  }
</style>
